<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="_csrf" th:content="${_csrf.token}">
    <meta name="_csrf_header" th:content="${_csrf.headerName}">
	<link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
	<link rel="stylesheet" th:href="@{/css/global.css}" />
	<title>数据统计</title>
</head>
<body>
	<div class="nk-container">
		<!-- 头部 -->
        <header class="bg-dark sticky-top" th:replace="~{index::header}">
        </header>

		<!-- 内容 -->
		<div class="main">
			<!-- 网站UV -->
			<div class="container pl-5 pr-5 pt-3 pb-3 mt-3">
				<h6 class="mt-3"><b class="square"></b> 网站 UV</h6>
				<form class="form-inline mt-3" method="post">
					<input type="date" class="form-control" name="startDate" th:value="${#dates.format(uvStartDate,'yyyy-MM-dd')}" id="uvStartDate" required/>
					<input type="date" class="form-control ml-3" name="endDate" th:value="${#dates.format(uvEndDate,'yyyy-MM-dd')}" id="uvEndDate" required/>
					<button type="button" class="btn btn-primary ml-3" id="uvButton">开始统计</button>
				</form>
				<ul class="list-group mt-3 mb-3">
					<li class="list-group-item d-flex justify-content-between align-items-center">
						统计结果
						<span class="badge badge-primary badge-danger font-size-14" id="uvResult">0</span>
					</li>
				</ul>
                <div id="uv-chart" style="width: 100%;height:400px;"></div>
			</div>
			<!-- 活跃用户 -->
			<div class="container pl-5 pr-5 pt-3 pb-3 mt-4">
				<h6 class="mt-3"><b class="square"></b> 活跃用户</h6>
				<form class="form-inline mt-3" method="post" >
					<input type="date" class="form-control" name="startDate" th:value="${#dates.format(dauStartDate,'yyyy-MM-dd')}" id="dauStartDate"  required/>
					<input type="date" class="form-control ml-3" name="endDate" th:value="${#dates.format(dauEndDate,'yyyy-MM-dd')}" id="dauEndDate" required/>
					<button type="button" class="btn btn-primary ml-3" id="dauButton">开始统计</button>
				</form>
				<ul class="list-group mt-3 mb-3">
					<li class="list-group-item d-flex justify-content-between align-items-center">
						统计结果
						<span class="badge badge-primary badge-danger font-size-14" id="dauResult">0</span>
					</li>
				</ul>
                <div id="dau-chart" style="width: 100%;height:400px;"></div>
			</div>				
		</div>

		<!-- 尾部 -->
        <footer class="bg-dark" th:replace="~{index::footer}">
        </footer>
	</div>

	<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
	<script th:src="@{/js/global.js}"></script>
    <script th:src="@{/js/echarts.min.js}"></script>
    <script th:inline="javascript">
        $(document).ready(function () {
            var uvChart = echarts.init(document.getElementById('uv-chart'));
            var dauChart = echarts.init(document.getElementById('dau-chart'));

            // 异步请求携带 CSRF 令牌
            let token = $("meta[name= '_csrf']").attr("content");
            let header = $("meta[name= '_csrf_header']").attr("content");
            $(document).ajaxSend(function (e, xhr, options){
                xhr.setRequestHeader(header, token);
            });

            // 验证日期
            function validateDates(start, end) {
                return new Date(start) <= new Date(end);
            }

            // 加载 UV 图表和总数
            function loadUVChart(start, end) {
                if (!validateDates(start, end)) {
                    alert("开始日期不能晚于结束日期！");
                    return;
                }
                $.post(
                    CONTEXT_PATH + "/data/uv",
                    {"start": start, "end": end},
                    function (response) {
                        var dates = getDates(start, end);
                        response = JSON.parse(response);
                        uvChart.setOption({
                            title: { text: '网站 UV 统计' },
                            tooltip: { trigger: 'axis' },
                            xAxis: { type: 'category', data: dates },
                            yAxis: { type: 'value' },
                            series: [{ data: response["uvData"], type: 'line' }]
                        });
                        uvChart.resize(); // 调整图表大小
                        // 更新总数
                        $("#uvResult").text(response["uvResult"]);
                    }
                ).fail(function(jqXHR, textStatus, errorThrown) {
                    console.log("AJAX 请求失败:", textStatus, errorThrown);
                });
            }

            // 加载 DAU 图表和总数
            function loadDAUChart(start, end) {
                if (!validateDates(start, end)) {
                    alert("开始日期不能晚于结束日期！");
                    return;
                }
                $.post(
                    CONTEXT_PATH + "/data/dau",
                    {"start": start, "end": end},
                    function (response) {
                        var dates = getDates(start, end);
                        response = JSON.parse(response)
                        dauChart.setOption({
                            title: { text: '活跃用户统计' },
                            tooltip: { trigger: 'axis' },
                            xAxis: { type: 'category', data: dates },
                            yAxis: { type: 'value' },
                            series: [{ data: response["dauData"], type: 'line' }]
                        });
                        dauChart.resize(); // 调整图表大小
                        // 更新总数
                        $("#dauResult").text(response["dauResult"]);
                    }
                ).fail(function(jqXHR, textStatus, errorThrown) {
                    console.log("AJAX 请求失败:", textStatus, errorThrown);
                });
            }

            // 获取日期数组
            function getDates(start, end) {
                var dates = [];
                var currentDate = new Date(start);
                var endDate = new Date(end);
                while (currentDate <= endDate) {
                    dates.push(currentDate.toISOString().split('T')[0]);
                    currentDate.setDate(currentDate.getDate() + 1);
                }
                return dates;
            }

            // 按钮点击事件绑定
            $("#uvButton").click(function () {
                var uvStartDate = $("#uvStartDate").val();
                var uvEndDate = $("#uvEndDate").val();
                loadUVChart(uvStartDate, uvEndDate);
            });

            $("#dauButton").click(function () {
                var dauStartDate = $("#dauStartDate").val();
                var dauEndDate = $("#dauEndDate").val();
                loadDAUChart(dauStartDate, dauEndDate);
            });
        });
    </script>
</body>
</html>
